import {LayerManager} from "./module/layer";
import {Button} from "./module/button";
import {UIManager} from "./module/UIManager";


let canvas;
let ctx;
let button;
let layerManager;
let ui;

export function init(id) {
    canvas = window.document.getElementById(id);
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    ctx = canvas.getContext("2d");

    ui = new UIManager(canvas, ctx);
    // button = new Button(canvas, ctx, 5, 5)


    window.addEventListener("resize", () => {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        update();
    })

    window.addEventListener("CellMapUpDate", () => {
        console.log("CellMapUpDate")
        update();
    })

    canvas.addEventListener('contextmenu', function (e) {
        e.preventDefault(); // 阻止默认行为，‌即不显示右键菜单
        e.stopPropagation(); // 阻止事件冒泡，‌防止在其他层面监听此事件
    });
    canvas.onmousedown = (e) => {
        var mouseX = e.pageX - canvas.offsetLeft;
        var mouseY = e.pageY - canvas.offsetTop;

        let hbEventObj = new Event("CellMapUpDate")
        window.dispatchEvent(hbEventObj)

//
//         console.log(mouseX, mouseY);
//         let hbEventObj = new Event("CellMapUpDate")
// // 给事件对象添加一个属性，叫做 myAttr
//         hbEventObj.myAttr = "demo"
// // 触发事件
//         window.dispatchEvent(hbEventObj)
    };

    update();
}

function update() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ui.draw(canvas)
    // window.requestAnimationFrame(update);
}
